<script setup>
import { useRouter, useRoute } from 'vue-router';
import FormCreateMobile from '@form-create/vant';
import AmountComponent from '@/components/FormCreate/mvcomponents/amountComponent/index.vue'
import { taskApplyApi, saveDataApi, revokeTaskApi, taskDataApi } from '@/api/modules/task'
import { addFlowForm, updateFlowForm, getFlowFormById, processOnlineForm } from "@/api/modules/flowForm"
import * as pcTools from '@/components/FormCreate/tools/index'
//路由
const route = useRoute()
//传递参数
const flowForm = ref();
const busKey = ref();
const flowId = ref("");
const fApi = ref({});
const formData = ref({});
const options = {
    submitBtn: false,// 隐藏提交按钮
    resetBtn: false // 隐藏重置按钮
};
const rule = ref([]);
//流程版本信息
const formVersionFrom = ref({
    id: 0,//id
    flowInfoId: '',//流程信息id
    versionName: '',//版本名称
    mvFormJson: {},//移动端表单
    pcFormJson: {},//PC端表单
    createTime: '',//创建时间
    updateTime: '',//修改时间
    exist: 1,//是否删除
});

const formCreateMobile = ref()

//设置组件
const setMenu = async () => {
    FormCreateMobile.component('amountComponent', AmountComponent);
}

//查询表单
const getFormData = async () => {
    console.log(flowId.value)
    processOnlineForm(flowId.value).then(res => {
        flowForm.value = res.data;
        if (busKey.value) {
            taskValue();
        }
        getFlowFormById(flowForm.value.id).then(res => {
            formVersionFrom.value = res.data;
            rule.value = formVersionFrom.value.mvFormJson;
        })
    })

}

//数据暂存
const saveData = async () => {
    fApi.value.validate((valid, fail) => {
        if (valid === true) {
            let formValue = formData.value;
            let taskData = {
                busKey: busKey.value,
                processInstanceId: "",
                flowInfoId: flowId.value,
                value: formValue
            }
            saveDataApi(taskData).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '数据暂存成功',
                        message: '数据暂存成功',
                        type: 'success',
                    })
                }
            })
        }
    }).then(() => {
        //推荐
        console.log('Promise resolved: 表单验证通过');
    }).catch(() => {
        console.log('Promise rejected: 表单验证未通过');
    });
}

//流程撤销
const revokeTask = async () => {
    let taskData = {
        busKey: busKey.value,
        processInstanceId: "",
        flowInfoId: flowId.value,
        value: formValue
    }
    revokeTaskApi(taskData).then(res => {
        if (res.code == 200) {
            ElNotification({
                title: '流程撤销成功',
                message: '流程撤销成功',
                type: 'success',
            })
        }
    })
}
//  流程申请
const taskApply = async () => {
    fApi.value.validate((valid, fail) => {
        if (valid === true) {
            let formValue = formData.value;
            let taskData = {
                busKey: busKey.value,
                processInstanceId: "",
                flowInfoId: flowId.value,
                value: formValue
            }
            taskApplyApi(taskData).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '流程申请成功',
                        message: '流程申请成功',
                        type: 'success',
                    })
                }
            })
        }
    }).then(() => {
        //推荐
        console.log('Promise resolved: 表单验证通过');
    }).catch(() => {
        console.log('Promise rejected: 表单验证未通过');
    });
}

onMounted(() => {
    flowId.value = route.query.flowId;
    console.log(">>>>>",flowId.value);
    setMenu();
    getFormData();
})

</script>
<template>
    <div style="margin: 5px;">
        <div style="border: 0 black;">
            <FormCreateMobile ref="formCreateMobile" :rule="rule" v-model:api="fApi" v-model="formData"
                :option="options" style="width: 100%;" height="50vh" />
        </div>
        <van-button class="btn" type="success" @click="taskApply()">申请</van-button>
        <van-button class="btn" type="warning" @click="revokeTask()">撤销</van-button>
        <van-button class="btn" type="primary" @click="saveData()">暂存</van-button>
    </div>
</template>
<style scoped>
.btn {
    width: 100%;
    margin-top: 5px;
    padding: 10px;
}
</style>